<template>
    <main style="display: flex">
        <GraphView style="width: 800px;height: 600px" ref="gView"/>
        <a-button @click="openImageModal">生成图片节点</a-button>
        <a-button @click="openTextModal">生成文本节点</a-button>
        <a-modal
                :open="textModalData.open"
                :title="textModalData.title"
                :width="textModalData.width"
                @ok="addTextNode"
        >
            <a-input v-model:value="text" autofocus/>
        </a-modal>
        <a-modal
            :open="imageModalData.open"
            :title="imageModalData.title"
            :width="imageModalData.width"
            @ok="addImageNode">
            <a-upload-dragger
                :showUploadList="false"
                name="file"
                :multiple="true"
                :customRequest="handleChange"
                @drop="handleDrop"
            >
                <p class="ant-upload-text">Click or drag file to this area to upload</p>
                <p class="ant-upload-hint">
                    Support for a single or bulk upload. Strictly prohibit from uploading company data or other
                    band files
                </p>
            </a-upload-dragger>
        </a-modal>
    </main>
</template>

<script setup>
import GraphView from "@/components/GraphView.vue";
import {ref} from "vue";
import {message} from "ant-design-vue";

const gView = ref()
const text = ref('')
const textModalData = ref({
    open: false,
    title: '',
    width: 600
})
const imageModalData = ref({
    open: false,
    title: '',
    width: 600
})

const openImageModal = () => {
    imageModalData.value.open = true
}
const openTextModal = () => {
    textModalData.value.open = true
}
const addTextNode = () => {
    console.log("input text",text.value)
    gView.value.addTextNode(text.value)
    textModalData.value.open = false
}
let src = null
const addImageNode = () => {
    gView.value.addImageNode(src)

    imageModalData.value.open = false
}

const handleChange = (info) => {
    const status = info.file.status;
    if (status !== 'uploading') {
        console.log(info.file);
        src = URL.createObjectURL(info.file);
    }
    if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
    }
};
function handleDrop(e) {
    console.log(e);
}
</script>


<style scoped>
header {
    line-height: 1.5;
}

.logo {
    display: block;
    margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
    header {
        display: flex;
        place-items: center;
        padding-right: calc(var(--section-gap) / 2);
    }

    .logo {
        margin: 0 2rem 0 0;
    }

    header .wrapper {
        display: flex;
        place-items: flex-start;
        flex-wrap: wrap;
    }
}
</style>
